<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
    <title>湖南省自来水公司营销管理信息系统</title>
    <link rel="stylesheet" href="../layui/css/layui.css">
    <link rel="stylesheet" href="../css/reset.css" type="text/css" media="screen" title="no title"/>
    <link rel="stylesheet" href="../css/text.css" type="text/css" media="screen" title="no title"/>
    <link rel="stylesheet" href="../css/form.css" type="text/css" media="screen" title="no title"/>
    <link rel="stylesheet" href="../css/buttons.css" type="text/css" media="screen" title="no title"/>
    <link rel="stylesheet" href="../css/grid.css" type="text/css" media="screen" title="no title"/>
    <link rel="stylesheet" href="../css/layout.css" type="text/css" media="screen" title="no title"/>
    <link rel="stylesheet" href="../css/ui-darkness/jquery-ui-1.8.12.custom.css" type="text/css" media="screen"
          title="no title"/>
    <link rel="stylesheet" href="../css/plugin/jquery.visualize.css" type="text/css" media="screen" title="no title"/>
    <link rel="stylesheet" href="../css/plugin/facebox.css" type="text/css" media="screen" title="no title"/>
    <link rel="stylesheet" href="../css/plugin/uniform.default.css" type="text/css" media="screen" title="no title"/>
    <link rel="stylesheet" href="../css/plugin/dataTables.css" type="text/css" media="screen" title="no title"/>
    <link rel="stylesheet" href="../css/custom.css" type="text/css" media="screen" title="no title">
    <style type="text/css">
        #volumeDiv {
            border: 4px solid #ccc;
            background-color: #fff;
            margin: 34px 60px;
            position: absolute;
            width: 640px;
        }
         .disabled{
             /*cursor:not-allowed;*/
             pointer-events: none;
             /*//  display: none;*/
         }

        #volumeDiv .header {
            background-color: #CCCCCC;
            font-size: 18px;
            font-weight: bold;
            text-align: center;
            padding: 4px;
            color: #FFFFFF;
        }

        .controlset span.label {
            text-align: left;
        }
    </style>
    <script type="text/javascript">
        function showVolumeDiv() {
            $('#volumeDiv').toggle();
        }
    </script>
</head>

<body>

<div id="wrapper">

    <div id="bool"><script>window.onload=function (){  $("#bool").load("../ming.html");}</script></div>

    <div id="content" class="xgrid">

        <div class="x12">

            <h2>用户欠费情况查询</h2>

            <div id="volumeDiv" class="form label-inline uniform" style="display:none;">
                <div class="header">
                    选择表册
                </div>
                <div class="controlset field">
                    <span class="label">&nbsp;</span>
                    <div class="controlset-pad">
                        <input type="checkbox" id="volumeAll" checked="checked"/>
                        <label for="volumeAll">所有表册</label><br/>
                    </div>
                </div>
                <div class="portlet x2" v-for="RdVolume  in RdVolumeList">
                    <div class="controlset field">
                        <span class="label" v-text="RdVolume.areaName"></span><br>
                        <div class="controlset-pad" v-for="r in RdVolume.rdVolumeList">
                            <input type="checkbox" :id="r.id" :value="r.id" v-model="Volumes"/><label :for="r.id"
                                                                                                      v-text="r.volumeName"></label><br/>
                        </div>
                    </div>
                </div>
            </div>

            <div class="searchDiv">
                起始年月 <select class="medium" id="minDate">
                <option v-for="between in betweenList" :value="between" v-text="between"></option>
            </select>

                截止年月 <select class="medium" id="maxDate">
                <option v-for="between in betweenList" :value="between" v-text="between"></option>
            </select>

                表册 <input type="button" value="选择表册" style="background-color:#F8F8F8;" onClick="showVolumeDiv();"/>

                排列 <select class="medium" id="SortField">
                <option value="UserNo">按用户编码</option>
                <option value="BillMoney-RealMoney">按欠费金额</option>
            </select>
                <button class="btn btn-small btn-icon btn-find" @click="query()"><span></span>查询</button>
            </div>


            <div class="reportTitle">
                2014年02月 至 2014年03月 用户欠费情况
            </div>
            <div class="height24">
                <div style="float:left;width:300px;">总应收水费：123.45 元</div>
                <div style="float:left;">总已收水费：0.45 元</div>
                <div style="float:right;font-weight:bold;">总欠费金额：123.00 元</div>
            </div>
            <table class="report">
                <thead>
                <tr>
                    <th width="100">用户编码</th>
                    <th>用户姓名</th>
                    <th width="150">水费单号</th>
                    <th width="80">上月底数</th>
                    <th width="80">本月抄数</th>
                    <th width="80">实用水量</th>
                    <th width="100">应收水费</th>
                    <th width="100">已收水费</th>
                    <th width="100">未收水费</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="bill in PyBillpage.records">
                    <td class="center" v-text="bill.usUser.userno"></td>
                    <td class="left" v-text="bill.usUser.username"></td>
                    <td class="center" v-text="bill.billNo"></td>
                    <td class="right" v-text="bill.rdRead.preValue"></td>
                    <td class="right"v-text="bill.rdRead.curValue"></td>
                    <td class="right"v-text="(bill.rdRead.preValue)-(bill.rdRead.curValue)"></td>
                    <td class="right" v-text="bill.billMoney"></td>
                    <td class="right" v-text="bill.realMoney"></td>
                    <td class="right" v-text="bill.billMoney-bill.realMoney"></td>
                </tr>
                </tbody>
            </table>
            <div class="page">
                <a href="javascript:;" @click="query(1)">第一页</a>
                <a href="javascript:;" @click="query(PyBillpage.current-1)" :class=" PyBillpage.current == 1 ? 'disabled' : ''">上一页</a>
                <input class="pageCount" value="7" v-model="PyBillpage.current"/> / <input class="pageCount" readonly="readonly"
                                                                                     v-model="PyBillpage.pages"/>
                <a href="javascript:;" :class=" PyBillpage.current == PyBillpage.pages ? 'disabled' : ''" @click="query(PyBillpage.current+1)">下一页</a>
                <a href="javascript:;" @click="query(PyBillpage.pages-0)">第末页</a>
            </div>

        </div> <!-- .x12 -->

    </div> <!-- #content -->

    <div id="footer">
        <div class="content_pad">
            <p>&copy; 2013-11 版权所有 <a href="#">湖南省自来水公司</a>. 技术支持 <a href="#">职业教育</a>.</p>
        </div> <!-- .content_pad -->
    </div> <!-- #footer -->

</div> <!-- #wrapper -->
<script src="/webjars/vue/2.5.17/dist/vue.js"></script>
<script src="../layui/layui.all.js"></script>
<script>
    var $ = layui.jquery,
        layer = layui.layer;

    //获取查询条件的时间区间
    function getYearMonth() {
        $.ajax({
            type: 'GET',
            url: "/py-bill/getYearMonth",
            // data:,
            dataType: 'json',
            success: function (json) {
                if (json.code == 200) {
                    app.betweenList = json.data.betweenList;
                } else {
                    layer.msg(json.message, {icon: 2})
                }
            },
        });
    }

    //获取查询条件的表册数据
    function getRdVolume() {
        $.ajax({
            type: 'GET',
            url: "/py-bill/getRdVolume",
            // data:,
            dataType: 'json',
            success: function (json) {
                if (json.code == 200) {
                    app.RdVolumeList = json.data.RdVolumeList;
                } else {
                    layer.msg(json.message, {icon: 2})
                }
            },
        });
    }

    //初始化数据
    function load(Volumes, minDate, maxDate, SortField,page) {
        var index = layer.load(0, {shade: false});
        $.ajax({
            type: 'POST',
            url: "/py-bill/getUserArrears",
            data: {"Volumes": Volumes, "minDate": minDate, "maxDate": maxDate, "SortField": SortField,"page":page},
            dataType: 'json',
            success: function (json) {
                if (json.code == 200) {
                    app.PyBillpage = json.data.PyBillpage;
                    console.log(JSON.stringify( app.PyBillpage));
                } else {
                    layer.msg(json.message, {icon: 2})
                }
                layer.close(index)
            },
        });
    }

    var app = new Vue({
        el: "#wrapper",
        data: {
            PyBillpage:'',//数据集合
            betweenList: '',//查询条件  时间区间
            RdVolumeList: '',//表册数据
            Volumes: [],//被选中表册编号
            minDate: '',//被选中的起始时间
            maxDate: '',//被选中的截止时间
            SortField: '',//被选中的排序字段
        }, methods: {
            //条件查询
            query(page) {
                //获取起始时间
                app.minDate = $("#minDate").val();
                //获取截止时间
                app.maxDate = $("#maxDate").val();
                //排序字段
                app.SortField = $("#SortField").val();
                load(app.Volumes.toString(), app.minDate+'-01', app.maxDate+'-31', app.SortField,page);
            }
        },
        created() {
            getYearMonth();
            getRdVolume();
            load(null,null,null,null);
        },
    });
</script>
<script src="../js/jquery/jquery-1.5.2.min.js"></script>
<script src="../js/jquery/jquery-ui-1.8.12.custom.min.js"></script>
<script src="../js/misc/excanvas.min.js"></script>
<script src="../js/jquery/facebox.js"></script>
<script src="../js/jquery/jquery.visualize.js"></script>
<script src="../js/jquery/jquery.dataTables.min.js"></script>
<script src="../js/jquery/jquery.tablesorter.min.js"></script>
<script src="../js/jquery/jquery.uniform.min.js"></script>
<script src="../js/jquery/jquery.placeholder.min.js"></script>

<script src="../js/widgets.js"></script>
<script src="../js/dashboard.js"></script>

<script type="text/javascript">

    $(document).ready(function () {
        Dashboard.init();

    });


</script>

</body>

</html>